<template>
  <view class="usp elderly-pressable">
    <view class="usp-left">
      <view class="avatar" />
      <view class="status-indicator"></view>
    </view>
    <view class="usp-mid">
      <text class="name elderly-text-large">{{userName || '用户'}}</text>
      <view class="weather-info">
        <text class="weather-temp elderly-text">{{(weather && weather.temp) || '24°C'}}</text>
        <text class="weather-desc elderly-text"> · {{(weather && weather.desc) || '晴'}}</text>
      </view>
      <view class="task-info">
        <text class="task-label elderly-text">今日任务</text>
        <text class="task-progress elderly-text">{{(tasks && tasks.done) || 0}}/{{(tasks && tasks.total) || 0}}</text>
      </view>
    </view>
    <view class="usp-right">
      <view class="health-score">
        <text class="score-number elderly-text-large">88</text>
        <text class="score-label elderly-text">健康指数</text>
      </view>
    </view>
  </view>
</template>

<script>
export default{
  name:'UserStatusPanel',
  props:{ userName:String, weather:Object, tasks:Object }
}
</script>

<style scoped>
.usp {
  margin: $elderly-spacing-base $elderly-spacing-lg;
  border-radius: $elderly-radius-lg;
  background: $elderly-bg-primary;
  backdrop-filter: blur(16rpx);
  display: flex;
  gap: $elderly-spacing-base;
  padding: $elderly-spacing-lg;
  border: 2rpx solid $elderly-border;
  box-shadow: $elderly-shadow-base;
  min-height: $elderly-touch-xl;
}

.usp-left {
  position: relative;
  display: flex;
  align-items: center;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  background: linear-gradient(135deg, $theme-orange, $theme-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: $elderly-font-xl;
  color: white;
  font-weight: bold;
}

.status-indicator {
  position: absolute;
  bottom: 8rpx;
  right: 8rpx;
  width: 24rpx;
  height: 24rpx;
  border-radius: 12rpx;
  background: #4ade80;
  border: 3rpx solid white;
}

.usp-mid {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: $elderly-spacing-xs;
}

.name {
  font-weight: 700;
  color: $elderly-text-primary;
  margin-bottom: $elderly-spacing-xs;
}

.weather-info {
  display: flex;
  align-items: center;
  gap: $elderly-spacing-xs;
}

.weather-temp {
  font-weight: 600;
  color: $theme-orange;
}

.weather-desc {
  color: $elderly-text-secondary;
}

.task-info {
  display: flex;
  align-items: center;
  gap: $elderly-spacing-sm;
}

.task-label {
  color: $elderly-text-secondary;
}

.task-progress {
  font-weight: 600;
  color: $theme-blue;
}

.usp-right {
  display: flex;
  align-items: center;
}

.health-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: $elderly-spacing-sm;
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.1), rgba(0, 212, 255, 0.1));
  border-radius: $elderly-radius-base;
  min-width: 100rpx;
}

.score-number {
  font-weight: 700;
  color: $theme-orange;
  line-height: 1;
}

.score-label {
  font-size: $elderly-font-xs;
  color: $elderly-text-secondary;
  margin-top: 4rpx;
}
</style>



